import React, { useState, useRef } from 'react';
import * as datetime from '@/utils/datetime';
import Workflow from '@/components/page/Workflow';
import { Button, Modal, Tabs } from 'antd';
import { useModel } from 'umi';
import SpBmbgYjbgForm from './SpBmbgYjbgForm';
const options = [
  { value: 0, label: '业绩带到新部门' },
  { value: 1, label: '业绩留到原部门其他员工' },
  { value: 2, label: '业绩留给原部门，个人业绩算自己' },
  { value: 3, label: '业绩按账户变更' },
];
const columns: API.Column[] = [
  {
    title: '申请人',
    key: 'sqrnm',
    dataIndex: 'sqrnm',
    width: 120,
    sorter: true,
    dispaly: true,
    filter: true,
    dataType: 'string',
  },
  {
    title: '变更类别',
    key: 'sqlb',
    dataIndex: 'sqlb',
    render: (sqlb: any) => (sqlb === 1 ? '员工' : '负责人'),
    width: 120,
    sorter: true,
    dispaly: true,
    filter: true,
  },
  {
    title: '调出部门',
    key: 'orgnmy',
    dataIndex: 'orgnmy',
    dataType: 'string',
    width: 120,
    sorter: true,
    dispaly: true,
    filter: true,
  },
  {
    title: '调入部门',
    key: 'orgnmx',
    dataIndex: 'orgnmx',
    dataType: 'string',
    width: 120,
    sorter: true,
    dispaly: true,
    filter: true,
  },
  {
    title: '调动日期',
    key: 'dddt',
    dataIndex: 'dddt',
    dataType: 'date',
    render: (sqsj: any) => datetime.format(sqsj, 'yyyy-MM-dd'),
    width: 160,
    sorter: true,
    dispaly: true,
    filter: true,
  },
  {
    title: '对公业务',
    key: 'yjbd_dg',
    dataIndex: 'yjbd_dg',
    render: (yjbd: any) => {
      if (yjbd === 0) {
        return '业绩带到新部门';
      } else if (yjbd === 1) {
        return '业绩留到原部门其他员工';
      } else if (yjbd === 2) {
        return '业绩留给原部门，个人业绩算自己';
      } else {
        return '业绩按账户变更';
      }
    },
    width: 160,
    sorter: true,
    dispaly: true,
    filter: true,
  },
  {
    title: '储蓄',
    key: 'yjbd_cx',
    dataIndex: 'yjbd_cx',
    render: (yjbd: any) => {
      if (yjbd === 0) {
        return '业绩带到新部门';
      } else if (yjbd === 1) {
        return '业绩留到原部门其他员工';
      } else if (yjbd === 2) {
        return '业绩留给原部门，个人业绩算自己';
      } else {
        return '业绩按账户变更';
      }
    },
    width: 120,
    sorter: true,
    dispaly: true,
    filter: true,
  },
  {
    title: '个贷',
    key: 'yjbd_gd',
    dataIndex: 'yjbd_gd',
    render: (yjbd: any) => {
      if (yjbd === 0) {
        return '业绩带到新部门';
      } else if (yjbd === 1) {
        return '业绩留到原部门其他员工';
      } else if (yjbd === 2) {
        return '业绩留给原部门，个人业绩算自己';
      } else {
        return '业绩按账户变更';
      }
    },
    width: 120,
    sorter: true,
    dispaly: true,
    filter: true,
  },
];

const SpBmbg: React.FC = () => {
  const [showYjbg, setShowYjbg] = useState<boolean>(false);
  const { user } = useModel('@@initialState', (ret) => ({
    user: ret.initialState?.user,
  }));
  const selTasksRef = useRef<Record<string, any>[] | undefined>();
  const controls: API.Control[] = [
    {
      name: `sqr`,
      type: 'search',
      label: `员工`,
      dataType: 'number',
      grid: 12 / 24,
      placeholder: '请输入工号或名称...',
      fetch: {
        tableName: 'User',
        searchColumns: ['No', 'Name'],
        optionTpl: 'Name',
        valueTpl: 'ID',
        isDao: true,
        where: `OrganID=${user?.pOrgID}`,
      },
      width: 200,
      rules: [],
    },
    {
      name: 'orgIDx',
      label: '调入部门',
      type: 'select',
      grid: 12 / 24,
      fetch: {
        tableName: 'Organization',
        optionTpl: 'Name',
        valueTpl: 'ID',
        parentTpl: 'OrganID',
        isDao: true,
      },
      dataType: 'number',
      placeholder: '请选择所属部门...',
      rules: [{ required: true, message: '调入部门' }],
    },
    {
      name: 'sqlb',
      label: '变更类别',
      type: 'radio-group',
      grid: 12 / 24,
      dataType: 'number',
      options: [
        { value: 1, label: '员工' },
        { value: 2, label: '负责人' },
      ],
      rules: [{ required: true, message: '变更类别' }],
    },
    {
      name: 'dddt',
      label: '调动日期',
      grid: 12 / 24,
      type: 'date',
      rules: [{ required: true, message: '调动日期' }],
    },
    {
      name: 'yjbd_dg',
      label: '对公业务',
      type: 'select',
      grid: 12 / 24,
      dataType: 'number',
      options,
      rules: [{ required: true, message: '对公存贷款' }],
    },
    {
      name: 'yjbd_cx',
      label: '储蓄',
      type: 'select',
      grid: 12 / 24,
      dataType: 'number',
      options,
      rules: [{ required: true, message: '储蓄' }],
    },
    {
      name: 'yjbd_gd',
      label: '个贷',
      type: 'select',
      grid: 12 / 24,
      dataType: 'number',
      options,
      rules: [{ required: true, message: '个贷' }],
    },
  ];
  let extraButtons: JSX.Element | undefined = undefined;
  if (user?.roleIds?.findIndex((id) => id === '20') !== -1) {
    extraButtons = (
      <Button
        type="ghost"
        key="set"
        onClick={() => {
          setShowYjbg(true);
        }}
      >
        设置业绩变更
      </Button>
    );
  }
  const curRow =
    selTasksRef?.current && selTasksRef?.current.length > 0 ? selTasksRef?.current[0] : undefined;
  return (
    <>
      <Workflow
        taskDaoName="SpBmbg"
        taskColumns={columns}
        taskControls={controls}
        initSorter={{ FieldName: 'SQSJ', Direction: 'ASC' }}
        title="部门变更申请"
        titleColNames={['sqrnm']}
        keyColName="frid"
        extraButtons={extraButtons}
        canAdd={true}
        canDelete={true}
        selTaskDatas={selTasksRef}
        editExtraVals={{ UID: user!.userID }}
      />
      {showYjbg && curRow ? (
        <Modal
          title="设置员工业绩转移"
          visible={showYjbg}
          centered
          footer={null}
          onCancel={() => setShowYjbg(false)}
          width={1000}
        >
          <Tabs defaultActiveKey="1">
            <Tabs.TabPane tab="对公存贷款" key="1">
              <SpBmbgYjbgForm
                frid={curRow?.frid}
                ywlx={1}
                yjbd={curRow?.yjbd_dg}
                options={options}
                islz={false}
              />
            </Tabs.TabPane>
            <Tabs.TabPane tab="储蓄" key="2">
              <SpBmbgYjbgForm
                frid={curRow?.frid}
                ywlx={2}
                yjbd={curRow?.yjbd_cx}
                options={options}
                islz={false}
              />
            </Tabs.TabPane>
            <Tabs.TabPane tab="个贷" key="3">
              <SpBmbgYjbgForm
                frid={curRow?.frid}
                ywlx={3}
                yjbd={curRow?.yjbd_gd}
                options={options}
                islz={false}
              />
            </Tabs.TabPane>
          </Tabs>
        </Modal>
      ) : null}
    </>
  );
};

export default SpBmbg;
